<?php /*a:1:{s:56:"D:\phpstudy_pro\WWW\chat\app\index\view\index\index.html";i:1597979291;}*/ ?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>沟通中</title>
    <link rel="stylesheet" type="text/css" href="/static/newcj/css/themes.css?v=2017129">
    <link rel="stylesheet" type="text/css" href="/static/newcj/css/h5app.css">
    <link rel="stylesheet" type="text/css" href="/static/newcj/fonts/iconfont.css?v=2016070717">
    <script src="/static/newcj/js/jquery.min.js"></script>
    <script src="/static/newcj/js/dist/flexible/flexible_css.debug.js"></script>
    <script src="/static/newcj/js/dist/flexible/flexible.debug.js"></script>
    <script src="/static/qqFace/js/jquery.qqFace.js"></script>
    <style>
        .qqFace {
            position: fixed;
            z-index: 1000;
            width: 100%;
            bottom: 50px;
            background: #fff;
            border: 1px #dfe6f6 solid;
            box-sizing: border-box;
        }
        .qqFace table{
            width: 100%;
        }
        .qqFace table tbody{
            width: 100%;
            height: 120px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: center;
            word-break: break-all;
            overflow-y: auto;
        }
        .qqFace table td { padding: 0px; }
        .qqFace table td img:hover {cursor: pointer; border: 1px #0066cc solid; }
    </style>
</head>
<body ontouchstart>
<div class='fui-page-group'>
<div class='fui-page chatDetail-page'>
    <div class="chat-header flex">
        <i class="icon icon-toleft t-48"></i>
        <span class="shop-titlte t-30">未命名</span>
        <span class="shop-online t-26"></span>
        <span class="into-shop">进店</span>
    </div>
    <div class="fui-content navbar" style="padding:1.2rem 0 1.35rem 0;">
        <div class="chat-content">
            <p style="display: none;text-align: center;padding-top: 0.5rem" id="more"><a>加载更多</a></p>
            <p class="chat-time"><span class="time">2020-08-13</span></p>
<!--            对方消息-->
<!--            <div class="chat-text section-left flex">-->
<!--                <span class="char-img" style="background-image: url(static/newcj/img/123.jpg)"></span>-->
<!--                <span class="text"><i class="icon icon-sanjiao4 t-32"></i>你好</span>-->
<!--            </div>-->

<!--            自己消息-->
<!--            <div class="chat-text section-right flex">-->
<!--                <span class="text"><i class="icon icon-sanjiao3 t-32"></i>你好</span>-->
<!--                <span class="char-img" style="background-image: url(static/newcj/img/132.jpg)"></span>-->
<!--            </div>-->

        </div>
    </div>
    <div class="fix-send flex footer-bar">
        <i class="icon icon-emoji1 t-50"></i>
        <input class="send-input t-28" id="saytext" maxlength="200">
        <input type="file" name="pic" id="file" style="display: none">
        <i class="icon icon-add t-50 image-up" style="color: #888;"></i>
        <span class="send-btn">发送</span>
    </div>
</div>
</div>
<script>
    const API_URL = 'http://api.chat.com:8000/v1/';
    let fromid = <?php echo htmlentities($fromid); ?>;
    let toid = <?php echo htmlentities($toid); ?>;
    let fromHeadImg,toHeadImg,toName,online;

    const ws =  new WebSocket("ws://127.0.0.1:8282");

    ws.onopen = function(e) {
        // websocket连接成功 初始化
        // 初始化发送消息 绑定用户唯一标识uid
        let bild = '{"type":"bind","fromid":"'+fromid+'"}';
        ws.send(bild);
        // 初始化用户头像
        get_head(fromid,toid);
        // 初始化好友昵称
        get_name(toid);
        // 初始化聊天消息数默认10条
        message_load();

        // 初始化对方是否在线
        let isOnline = '{"type":"online","fromid":"'+fromid+'","toid":"'+toid+'"}';
        ws.send(isOnline);
    };

    ws.onmessage = function(e){
        let message =  eval("("+e.data+")");

        switch (message.type){
            case "text":
                if(toid == message.fromid){
                    $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url('+toHeadImg+')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+replace_em(message.data)+'</span> </div>');
                }
                goScrollTop();
                break;
            case "save":
                // 将接收到的消息保存到数据库
                saveMessage(message);
                // 发送消息时判断是否在线
                if (message.isread === 1){ // 在线
                    online = 1;
                    $(".shop-online").text('在线');
                }else{ // 不在线
                    online = 0;
                    $(".shop-online").text('离线');
                }
                break;
            case "sayImage":
                if(toid == message.fromid) {
                    $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url('+toHeadImg+')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img src="http://localhost/chat/public' + message.img_name + '" width="120em" height="120em"/></span> </div>');
                    goScrollTop();
                }
                break;
            case "online":
                if(message.status === 1){ // 好友在线
                    online = 1;
                    $(".shop-online").text('在线');
                } else { // 不在线
                    online = 0;
                    $(".shop-online").text('离线');
                }
        }
    };

    $(".send-btn").click(function(){
        
        let text = $(".send-input").val();
        let message = '{"data":"'+text+'","type":"say","fromid":"'+fromid+'","toid":"'+toid+'"}';
        $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+replace_em(text)+'</span> <span class="char-img" style="background-image: url('+fromHeadImg+')"></span> </div>');
        ws.send(message);
        $(".send-input").val("");
        goScrollTop();
        
    });

    // 保持长连接请求
    function saveMessage(message) {
        $.post(
            API_URL+"Chat/saveMessage",
            message,
            function (e) {
                // 请求成功返回数据
                console.log(e);
            },
            'json'
        )
    }

    // 获取对话页面双方头像
    function get_head(fromid,toid){
        $.post(
            API_URL+"Chat/getHeadImg",
            {fromid:fromid,toid:toid},
            function (e) {
                // 请求成功返回数据
                if(e.code === 1){
                    fromHeadImg = e.data.fromImg;
                    toHeadImg = e.data.toImg;
                }else{
                    console.log(e.msg);
                }
            },
            'json'
        )
    }

    // 获取聊天对象昵称
    function get_name(toid) {
        $.post(
            API_URL+"Chat/getNickName",
            {toid:toid},
            function (e) {
                // 请求成功返回数据toName
                if(e.code === 1){
                    toName = e.data.nickname;
                    $(".shop-titlte").text(toName);
                }else{
                    console.log(e.msg);
                }
            },
            'json'
        )
    }
    
    // 初始化对话消息
    function message_load() {
        $.post(
            API_URL+"Chat/messageLoad",
            {fromid:fromid,toid:toid},
            function (e) {
                // 请求成功返回数据toName
                if(e.code === 1){
                    for(let i = e.data.length - 1; i >= 0; i--){
                        switch (e.data[i].type) {
                            case 1: // 文本
                                if(e.data[i].fromid === fromid){
                                    $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i>'+replace_em(e.data[i].content)+'</span> <span class="char-img" style="background-image: url('+fromHeadImg+')"></span> </div>');
                                }else{
                                    $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url('+toHeadImg+')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i>'+replace_em(e.data[i].content)+'</span> </div>');
                                }
                                break;
                            case 2: // 图片
                                if(e.data[i].fromid === fromid){
                                    $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i><img src="http://localhost/chat/public' + e.data[i].content + '" width="120em" height="120em"/></span> <span class="char-img" style="background-image: url(' + fromHeadImg + ')"></span> </div>');
                                }else{
                                    $(".chat-content").append(' <div class="chat-text section-left flex"><span class="char-img" style="background-image: url('+toHeadImg+')"></span> <span class="text"><i class="icon icon-sanjiao4 t-32"></i><img src="http://localhost/chat/public' + e.data[i].content + '" width="120em" height="120em"/></span> </div>');
                                }
                                break;
                        }
                    }
                    goScrollTop();
                }else{
                    console.log(e.msg);
                }
            },
            'json'
        )
    }

    //页面滚动到最底部
    function goScrollTop() {
        $(".chat-content").scrollTop(30000);
    }

    // 发送图片
    $('.image-up').click(function (){
        $("#file").click();
    });

    // 改变选择图片时异步上传图片
    $("#file").change(function () {
        let fromData = new FormData();
        fromData.append('fromid',fromid);
        fromData.append('toid',toid);
        fromData.append('online',online);
        fromData.append('image',$("#file").get(0).files[0]);

        $.ajax({
            url:API_URL+"Chat/uploadImg",
            type:'POST',
            data:fromData,
            cache:false, // true默认使用缓存
            dataType:'JSON',
            processData:false, // true默认把接收到的值转为对象
            contentType:false, // true默认incode编码
            success:function (res) {
                if(res.code === 1){
                    $(".chat-content").append('<div class="chat-text section-right flex"><span class="text"><i class="icon icon-sanjiao3 t-32"></i><img src="http://localhost/chat/public'+res.data.img_name+'" width="120em" height="120em"></span> <span class="char-img" style="background-image: url('+fromHeadImg+')"></span> </div>');
                    goScrollTop();
                    // 图片上传成功 给服务端发送消息
                    let message = '{"data":"'+res.data.img_name+'","type":"sayImage","fromid":"'+fromid+'","toid":"'+toid+'"}';
                    ws.send(message);
                }else{
                    console.log(e.msg);
                }
            }
        })
    })

    // 标记消息已读
    function setMessageRead(msglist){
        msglist.forEach((item)=>{
            // 页面初始化时标记拉取消息已读
            // 页面接收消息时标记当前消息已读
        })
    }

</script>
<script>
    $(function(){
        $('.icon-emoji1').qqFace({
            assign:'saytext',
            path:'static/qqFace/arclist/'	//表情存放的路径
        });
    });

    //解析表情文本
    function replace_em(str){
        str = str.replace(/\</g,'&lt;');
        str = str.replace(/\>/g,'&gt;');
        str = str.replace(/\n/g,'<br/>');
        str = str.replace(/\[em_([0-9]*)\]/g,'<img src="static/qqFace/arclist/$1.gif" border="0" />');
        return str;
    }
</script>
</body>
</html>
